<template>
  <div>
    <!-- 搜索 -->
    <AppSearch></AppSearch>
    <van-tree-select
      @click-nav="change"
      height="100vh"
      width="10%"
      :items="items"
      :main-active-index.sync="active"
    >
      <template #content>
        <div class="current_img">
          <img style="width: 100%" v-lazy="currentCategory.banner_url" />
          <div class="front_desc">
            {{ currentCategory.front_desc }}
          </div>
        </div>
        <div class="current_title">
          - &nbsp;{{ currentCategory.name }}分类&nbsp; -
        </div>
        <van-grid :column-num="3" :border="false">
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            text="文字"
          >
            <img style="width: 100%" v-lazy="item.wap_banner_url" alt="" />
            <div>{{ item.name }}</div>
          </van-grid-item>
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import AppSearch from "../components/AppSearch.vue";
import { Catalog, Current } from "@/api/catalog.js";
import { ConverToList } from "@/Utils/tools.js";
export default {
  components: {
    AppSearch,
  },
  async created() {
    let {
      data: {
        data: { categoryList, currentCategory },
      },
    } = await Catalog();
    this.items = ConverToList(categoryList);
    this.categoryList = categoryList;
    this.currentCategory = currentCategory;
  },
  data() {
    return {
      active: 0,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      categoryList: [],
      currentCategory: {},
    };
  },
  methods: {
    async change() {
      let {
        data: {
          data: { currentCategory },
        },
      } = await Current({ id: this.categoryList[this.active].id });
      console.log(currentCategory);
      this.currentCategory = currentCategory;
    },
  },
};
</script>

<style lang="less" scoped>
.current_img {
  position: relative;
  height: 150px;
  padding: 10px;
  img {
    box-shadow: 0 0 3px #000;
    height: 100%;
    filter: brightness(70%);
  }
  .front_desc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
  }
}
.current_title {
  text-align: center;
  font-size: 16px;
  padding: 20px;
  font-weight: bold;
}
.van-tree-select__content {
  flex: 4;
}
</style>
